<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>类型模板管理</title>
	<!-- Tell the browser to be responsive to screen width -->
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/plugins/select2/select2.css" />
	<link rel="stylesheet" href="/plugins/select2/select2-bootstrap.css" />
	<script src="/plugins/select2/select2.min.js" type="text/javascript"></script>

</head>

<body class="hold-transition skin-red sidebar-mini" >
<!-- .box-body -->

<div class="box-header with-border">
	<h3 class="box-title">商品类型模板管理</h3>
</div>

<div class="box-body">

	<!-- 数据表格 -->
	<div class="table-box">

		<!--工具栏-->
		<div class="pull-left">
			<div class="form-group form-inline">
				<div class="btn-group">
					<button type="button" class="btn btn-default"  title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
					<button type="button" class="btn btn-default" title="删除" onclick="deleteAll()"><i class="fa fa-trash-o"></i> 删除</button>

					<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
				</div>
			</div>
		</div>
		<div class="box-tools pull-right">
			<div class="has-feedback">
				分类模板名称：<input type="text" id="id" >
				<button class="btn btn-default" onclick="getData()">查询</button>
			</div>
		</div>
		<!--工具栏/-->

		<!--数据列表-->
		<div id="type_id"></div>
		<div th:insert="page.html"></div>
		<!--数据列表/-->
	</div>
	<!-- 数据表格 /-->

</div>
<!-- /.box-body -->




<!-- 增加窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">商品类型模板编辑</h3>
			</div>
			<div class="modal-body">

				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<td>商品类型</td>
						<td><input id="typeName" name="name" class="form-control" placeholder="商品类型">  </td>
					</tr>
					<tr>
						<td>关联品牌</td>
						<td>
							<select id="brands" style="width: 100%" multiple>
								<option th:each="brand : ${brandList}" th:value="${brand.id}">
									[[${brand.name}]]
								</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>关联规格</td>
						<td>
							<select id="specific" style="width: 100%" multiple>
								<option th:each="spec : ${specList}" th:value="${spec.id}">
									[[${spec.specName}]]
								</option>
							</select>
						</td>
					</tr>

					<tr>
						<td>扩展属性</td>
						<td>
							<div class="btn-group">
								<button type="button" class="btn btn-default" title="新增扩展属性"><i class="fa fa-file-o"></i> 新增扩展属性</button>

							</div>
							<table class="table table-bordered table-striped"  width="800px">
								<thead>
								<tr>
									<td><input type="checkbox" class="icheckbox_square-blue"></td>
									<td>属性名称</td>
									<td>操作</td>
								</tr>
								</thead>
								<tbody>
								<tr>
									<td><input type="checkbox" class="icheckbox_square-blue" ></td>
									<td><input  name="custom" class="form-control" placeholder="属性名称" ></td>
									<td><button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>
								</tr>
								<tr>
									<td><input type="checkbox" class="icheckbox_square-blue" ></td>
									<td><input name="custom" class="form-control" placeholder="属性名称" ></td>
									<td><button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>
								</tr>
								</tbody>
							</table>

						</td>
					</tr>

				</table>

			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="toAdd()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
<!-- 修改窗口 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel2">商品类型模板编辑</h3>
			</div>
			<div class="modal-body">

				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<input type="hidden" name="id" id="typeId">
						<td>商品类型</td>
						<td><input id="typeName2" name="name" class="form-control" placeholder="商品类型"></td>
					</tr>
					<tr>
						<td>关联品牌</td>
						<td>
							<select id="brands2" style="width: 100%" multiple>
								<option th:each="brand : ${brandList}" th:value="${brand.id}">
									[[${brand.name}]]
								</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>关联规格</td>
						<td>
							<select id="specific2" style="width: 100%" multiple>
								<option th:each="spec : ${specList}" th:value="${spec.id}">
									[[${spec.specName}]]
								</option>
							</select>
						</td>
					</tr>

					<tr>
						<td>扩展属性</td>
						<td>
							<div class="btn-group">
								<button type="button" class="btn btn-default" title="新增扩展属性"><i class="fa fa-file-o"></i> 新增扩展属性</button>

							</div>
							<table class="table table-bordered table-striped"  width="800px">
								<thead>
								<tr>
									<td><input type="checkbox" class="icheckbox_square-blue"></td>
									<td>属性名称</td>
									<td>操作</td>
								</tr>
								</thead>
								<tbody id="update_id">
								</tbody>
							</table>
						</td>
					</tr>
				</table>

			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateInfo()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
<script>
	//页面加载函数select2,关联品牌表,规格表
	$(function (){
		$("#brands").select2();
		$("#brands2").select2();
		$("#specific").select2();
		$("#specific2").select2();
	})
	//页面加载函数
	$(function (){
		getData();
	})
	function getData(){
		$.ajax({
			url:"/templateController/selectAll",
			type:"post",
			dataType:"json",
			data:{name:$("#id").val(),pageNum:$("#pageNum").val(),pageSize:$("#pageSize").val()},
			async:false,
			success:function (result){
				    var page = result.data;
				    var list = page.rows;
					var table = " <table id=\"dataList\" class=\"table table-bordered table-striped table-hover dataTable\">";
					table += "<thead><tr> <th class=\"\" style=\"padding-right:0px\">";
					table += " <input id=\"selall\" type=\"checkbox\" class=\"icheckbox_square-blue\"> </th> ";
					table += " <th class=\"sorting_asc\">模板ID</th> ";
					table += "<th class=\"sorting\">分类模板名称</th>" +
							"<th class=\"sorting\">关联品牌</th>" +
							"<th class=\"sorting\">关联规格</th>" +
							"<th class=\"sorting\">扩展属性</th>" +
							"<th class=\"text-center\">操作</th></tr></thead>";
					table += " <tbody>"
					for (var i = 0; i < list.length; i++) {
						var brandsJson = JSON.parse(list[i].brandIds);
						var brand = "";
						for (var j = 0; j < brandsJson.length; j++) {
							brand +=","+brandsJson[j].text
						}
						brand = brand.substring(1);
						var specIdsJson = JSON.parse(list[i].specIds);
						var specIds = "";
						for (var j = 0; j <specIdsJson.length ; j++) {
							specIds +=","+specIdsJson[j].text;
						}
						specIds = specIds.substring(1);
						var customattributeJson = JSON.parse(list[i].customAttributeItems)
						var custom = "";
						for (var j = 0; j < customattributeJson.length; j++) {
							custom +=","+customattributeJson[j].text;
						}
						custom = custom.substring(1);
						table +=" <tr> " +
								"<td><input  type=\"checkbox\" name='box' value='"+list[i].id+"'></td>" +
								"<td>"+list[i].id+"</td>" +
								"<td>"+list[i].name+"</td>" +
								"<td>"+brand+"</td>" +
								"<td>"+specIds+"</td>" +
								"<td>"+custom+"</td><td class=\"text-center\">" +
								"<button type=\"button\" class=\"btn bg-olive btn-xs\" data-toggle=\"modal\" data-target=\"#updateModal\" onclick='toUpdate("+list[i].id+")'>修改</button></td></tr>";
					}
					table +='</tbody>';
					table +="</table>";
					$("#type_id").html(table);
					buildPage(page)

			},
		})
	}
	function toAdd(){
		var select = $("#brands").select2('data');
		var brandList = [];
		for (var i = 0; i <select.length ; i++) {
			//定义一个对象接收
			var brand = {id:select[i].id,text:select[i].text.trim()};
			brandList.push(brand);
		}
		//把对象转成字符串
		var brandListJson = JSON.stringify(brandList);
		//获取select2中所有选中的属性
		var select2 = $("#specific").select2('data');
		var specificList = [];
		for (var i = 0; i < select2.length; i++) {
			//定义一个对象接收
			var specific = {id:select2[i].id,text:select2[i].text.trim()}
			specificList.push(specific);
		}
		//把对象转成字符串
		var specificListJson = JSON.stringify(specificList);
		var customattribute =$("[name=custom]")
		var customList = [];
		for (var i = 0; i < customattribute.length; i++) {
			//定义一个对象接收
			var customs = {text:customattribute[i].value}
			customList.push(customs)
		}
		//把对象转成字符串
		var customListJson = JSON.stringify(customList)
		$.ajax({
			url : "/templateController/insertInfo",
			type : "post",
			dataType:"json",
			data:{name:$("#typeName").val(),brandIds:brandListJson,specIds:specificListJson,customAttributeItems:customListJson},
			async : false,
			success : function (result){
				if (result.code == 10000 ){
					alert("增加成功")
					window.location.reload();
				}
			},
		})
	}
 function toUpdate(id) {
	 $.ajax({
		 url: "/templateController/toUpdate/" + id,
		 dataType: "json",
		 type: "post",
		 success: function (result) {
			 var list = result.data;
			 $("#typeName2").val(list.name);
			 $("#typeId").val(list.id);
			 //回显关联品牌
			 var brandsJson = JSON.parse(list.brandIds);
			 var brandIds = [];
			 for (var i = 0; i < brandsJson.length; i++) {
				 brandIds.push(brandsJson[i].id)
			 }
			 //回显关联规格表
			 $("#brands2").val(brandIds).trigger("change");
			 var specJson = JSON.parse(list.specIds);
			 var specIds = [];
			 for (var i = 0; i < specJson.length; i++) {
				 specIds.push(specJson[i].id)
			 }
			 $("#specific2").val(specIds).trigger("change");
			 var customJson = JSON.parse(list.customAttributeItems);
			 var customIds = "";
			 for (var i = 0; i < customJson.length; i++) {
				 customIds += '<tr>';
				 customIds += '<td><input type="checkbox" className="icheckbox_square-blue"></td>';
				 customIds += '<td><input name="custom2" value="' + customJson[i].text + '" className="form-control" placeholder="属性名称"></td>';
				 customIds += '<td><button type="button" className="btn btn-default" title="删除"><i className="fa fa-trash-o"></i> 删除</button></td>';
				 customIds += '</tr>';
			 }
			 $("#update_id").html(customIds);
		 }
	 })
 }
 function updateInfo(){
	 //获取select2中所有选中的属性
	 var select = $("#brands2").select2('data');
	 var brandList = [];
	 for (var i = 0; i <select.length ; i++) {
		 //定义一个对象接收
		 var brand = {id:select[i].id,text:select[i].text.trim()};
		 brandList.push(brand);
	 }
	 //把对象转成字符串
	 var brandListJson = JSON.stringify(brandList);
	 console.log(brandListJson)

	 //获取select2中所有选中的属性
	 var select2 = $("#specific2").select2('data');
	 var specificList = [];
	 for (var i = 0; i < select2.length; i++) {
		 //定义一个对象接收
		 var specific = {id:select2[i].id,text:select2[i].text.trim()}
		 specificList.push(specific)
	 }
	 //把对象转成字符串
	 var specificListJson = JSON.stringify(specificList);
	 console.log(specificListJson)

	 var customattribute =$("[name=custom2]")
	 var customList = [];
	 for (var i = 0; i < customattribute.length; i++) {
		 //定义一个对象接收
		 var customs = {text:customattribute[i].value}
		 customList.push(customs)
	 }
	 //把对象转成字符串
	 var customListJson = JSON.stringify(customList)
	 console.log(customListJson)
	 $.ajax({
		 url : "/templateController/updateInfo",
		 type : "post",
		 dataType:"json",
		 data:{id:$("#typeId").val(),name:$("#typeName2").val(),brandIds:brandListJson,specIds:specificListJson,customAttributeItems:customListJson},
		 async : false,
		 success : function (result){
			 if (result.code == 10000){
				 alert("修改成功")
				 window.location.reload();
			 }
		 },

	 })
 }
	//批量删除
	function deleteAll(){
		var boxs = $("[name=box]:checked")
		var ids =[];
		$(boxs).each(function (i,e){
			ids.push(e.value);
		})
		$.ajax({
			url :"/templateController/deleteAll",
			type:"post",
			data:{ids:ids},
			dataType:"json",
			async:true,
			success:function (result){
				if (result.code==10000){
					alert("删除成功");
					window.location.reload();
				}
			},
		})
	}
</script>
</body>
</html>